<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 300px;
            height: 40px;
            /* border:1px solid #ccc; */
            margin-top: 100px;
            margin-left: 100px;
            position: relative;
        }

        .search {
            width: 300px;
            height: 40px;

        }

        .list {
            position: absolute;
            top: 42px;
            left: 0;
            width: 500px;
        }

        ul,
        li {
            list-style: none;
        }

        .list img,
        .list p {
            float: left;
        }

        .list img {
            width: 150px;
        }

        .list p {
            width: 350px;
        }

        .list li {
            height: 20px;
        }

        .list ul {
            width: 300px;
            height: 150px;
            border: 1px solid #ccc;
            display: none
        }

        .list li:hover {
            background-color: #ccc;
        }
    </style>
</head>

<body>

    <div class="wrap">
        <input type="text" class="search">
        <div class="list">
            <ul>
                <!-- <li>
                    <img src="" alt="">
                    <p></p>
                </li> -->
            </ul>
        </div>
    </div>


    <script src="./jquery.js"></script>
    <script>
        $(function () {
            // 键盘抬起事件
            $('.search').keyup(function () {
                // 让ul显示出来
                $(".list ul").show()
                // 声明变量接收val
                var val = $(this).val();
                // 如果val为空直接return
                if (val == "") {
                    $('.list ul').html('');
                    return;
                }
                // 根据输入的val开始ajax查询数据库
                $.ajax({
                    // 地址
                    url: 'db_yuedu.php',
                    // 数据
                    data: {
                        val: val
                    },
                    // 链接成功处理数据
                    success: function (data) {            
                        // 将接收的数据转为JSON格式
                        var item = JSON.parse(data);
                        var html = '';
                        // 判断是否有数据传来 code是与后台的接头暗号
                        if (item['code'] == 1) {
                            // 将传来的数据进行循环遍历
                            for (var i = 0; i < item['msg'].length; i++) {
                                // 数据插入之前声明的html空数组中
                                html += `  <li>
                                        <p>${item['msg'][i]['title']}</p>
                                        </li>`
                            }
                            // 数据渲染到页面
                            $('.list ul').html(html);
                        }
                    }
                })
            })
            // 失去焦点事件
            $('.search').blur(function () {
                // ul隐藏
                $(".list ul").hide()
            })
        })

    </script>
</body>

</html>